<template>
    <a-drawer width="640" placement="right" :closable="false" :open="open" @close="onClose">
        <a-descriptions title="餐饮服务信息" layout="vertical" bordered>
            <a-descriptions-item label="店名">{{ spotsStore.selectFood.name }}</a-descriptions-item>
            <a-descriptions-item label="开放时间">
                <div v-if="spotsStore.selectFood.business.opentime_week">
                    {{ spotsStore.selectFood.business.opentime_week }}
                </div>
                <div v-else style="color: red;">暂无营业时间信息</div>
            </a-descriptions-item>
            <a-descriptions-item label="订餐电话">
                <div v-if="spotsStore.selectFood.business.tel">
                    <div v-for="(tel, index) in spotsStore.selectFood.business.tel.split(';')" :key="index">{{ tel }}
                    </div>
                </div>
                <div v-else style="color: red;">暂无订餐电话</div>
            </a-descriptions-item>
            <a-descriptions-item label="营业状态" :span="3">
                <span style="margin-right: 50px; color: darkgreen;">当前时间：{{ nowtime }}</span>
                <a-badge style="margin-left: 50px;" status="processing" text="营业中" />
            </a-descriptions-item>
            <a-descriptions-item label="评分">{{ spotsStore.selectFood.business.rating }}分<span
                    style="margin-left: 10px;">
                    <a-rate :value=Number(spotsStore.selectFood.business.rating) disabled />
                </span></a-descriptions-item>
            <a-descriptions-item label="与所选景点距离">{{ spotsStore.selectFood.distance }} 米</a-descriptions-item>
            <a-descriptions-item label="平均消费">
                <div v-if="spotsStore.selectFood.business.cost" style="color: green;">{{
                    spotsStore.selectFood.business.cost }} ￥</div>
                <div v-else style="color: red;">暂无价格信息</div>
            </a-descriptions-item>
            <a-descriptions-item label="招牌菜品" :span="3">
                <div v-if="spotsStore.selectFood.business.tag">
                    <a-tag v-for="tag in spotsStore.selectFood.business.tag.split(',')" :key="tag"
                        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'yellow' : 'orange'">
                        {{ tag.toUpperCase() }}
                    </a-tag>
                </div>
                <div v-else><a-tag color="orange">暂无菜品信息</a-tag></div>
            </a-descriptions-item>
            <a-descriptions-item label="餐馆照片" :span="3">
                <div v-if="fileList.length > 0">
                    <a-upload v-model:fileList="fileList" name="photo" list-type="picture-card" @preview="handlePreview"
                        :showUploadList="{
                            showRemoveIcon: false,
                            showPreviewIcon: true
                        }">
                    </a-upload>
                    <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleformCancel">
                        <img alt="餐馆照片" style="width: 100%" :src="previewImage" />
                    </a-modal>
                </div>
                <div v-else>
                    <a-empty />
                </div>
            </a-descriptions-item>
            <a-descriptions-item label="餐馆地址" :span="3">
                <div style="color: blue;">{{ spotsStore.selectFood.address }}</div>
            </a-descriptions-item>
        </a-descriptions>
    </a-drawer>
</template>
<script setup>
import { ref, watch } from 'vue';
import { spotsInfoStore } from '@/stores/spots';
const spotsStore = spotsInfoStore()
const open = ref(false);
const nowtime = ref('')

const previewVisible = ref(false);
const previewImage = ref('');
const previewTitle = ref('');
const fileList = ref([]);
const handleformCancel = () => {
    previewVisible.value = false;
    previewTitle.value = '';
};
//预览照片
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}
const handlePreview = async file => {
    if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
    }
    previewImage.value = file.url || file.preview;
    previewVisible.value = true;
    previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
};
const onClose = () => {
    spotsStore.SetFoodOpen(false)
    console.log(spotsStore.selectFood, 'propsssss');
};
//获取当前时间
function getCurrentTime() {
    const date = new Date();
    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    const day = weekdays[date.getDay()];

    // 补零函数
    const addZero = num => num.toString().padStart(2, '0');
    // 或兼容旧浏览器的写法：
    // const addZero = num => (num < 10 ? '0' : '') + num;

    const hours = addZero(date.getHours());
    const minutes = addZero(date.getMinutes());
    const seconds = addZero(date.getSeconds());

    return `${day} ${hours}:${minutes}:${seconds}`;
}

// 示例输出：星期三 14:05:09

// 监听 spotsStore.foodopen 的变化
watch(() => spotsStore.FoodOpen, (newVal) => {
    open.value = newVal;
});
// 监听 spotsStore.foodopen 的变化
watch(() => spotsStore.selectFood, (newVal) => {
    nowtime.value = getCurrentTime()
    fileList.value = []
    if (newVal.photos) {
        for (let i = 0; i < newVal.photos.length; i++) {
            fileList.value.push({
                uid: i + 1,
                name: '餐馆照片',
                status: 'done',
                url: newVal.photos[i].url,
            },)
        }
    }
});
</script>
<style lang="scss" scoped>
.image-item {
    margin-right: 10px;
    margin-bottom: 10px;
}
</style>